<!-- 传输的二级选项(侧边栏) -->
<template>
  <div class="project-tree ks-treenode">
    <ul>
      <li :class="{ active: transmitType === 0 }" @click="getSelct(0)">
        <img src="@/assets/images/download.png">正在下载
      </li>
      <!-- <li :class="{ active: transmitType === 1 }" @click="getSelct(1)">
        <img src="@/assets/images/upload.png">正在上传
      </li> -->
      <li :class="{ active: transmitType === 2 }" @click="getSelct(2)">
        <img src="@/assets/images/success.png">传输完成
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transmitType: this.$store.state.transmitType
    }
  },
  methods: {
    // 选择传输的类型选项
    getSelct(type) {
      this.$store.commit('edittransmitType', type)
      this.transmitType = type
      const routerName = type === 0 ? 'down' : type === 1 ? 'up' : 'transfer';
      this.$router.push({ name: routerName })
    }
  },
}
</script>

<style lang="scss" scoped>
.project-tree {
  height: 100%;
  background-color: #ebf1f7;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 2px solid #f5f5f5;
}

.ks-treenode {
  ul {
    list-style-type: none;
    width: 100%;
    padding: 0;

    li {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      cursor: pointer;
      transition: all 0.5s ease;
      position: relative;
      font-size: 12px;

      img {
        width: 16px;
        transform: translateX(-5px);
      }
    }

    li:hover,
    li.active {
      color: #0273C4;
      background-color: #e5f4ff;
    }
  }
}
</style>